<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是11月21日<span>星期六</span></p>
    <p class="title">下课倒计时</p>
    <p class="clock">
      <span id="hour">16</span>
      <i>:</i>
      <span id="minutes">30</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">17:40:00下课</p>
  </div>





  <script>


    let date=new Date("2024-11-21 16:30:20")

    let hour =document.querySelector("#hour")
    let minutes =document.querySelector("#minutes")
    let scond =document.querySelector("#scond")
   

    const days = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

    function randomColor(flag = true) {
      if (flag) {
        let str = '#'
        const colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 0; i < 6; i++) {  
          const n = Math.floor(Math.random() * colors.length); 

        }
        return str;
      } else {
        const r = Math.floor(Math.random() * 256)
        const g = Math.floor(Math.random() * 256)
        const b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }
    }
     // 页面刷新随机得到颜色
    document.querySelector(".countdown").style.backgroundColor=randomColor()
    // 修改星期
    document.querySelector(".countdown .next span ").innerText = days[date.getDay()]
    // 函数封装 getCountTime
    function getCountTime(){
        document.querySelector(".countdown").style.backgroundColor=randomColor()
				let date = new Date();
				let last = new Date("2024-11-21 17:40:00");
				let timeDiff = (last.getTime() - date.getTime()) / 1000;

				hour.innerHTML = parseInt(timeDiff / 60 / 60);

				minutes.innerHTML = parseInt(timeDiff / 60)==60?0: parseInt(timeDiff / 60) ;

				scond.innerHTML = parseInt(timeDiff % 60);


    }
    // getCountTime()
   // 让倒计时生效
   setInterval(getCountTime,1000)



  </script>
</body>

</html>